<template>
  <div>
    <bread-crumb :crumb="crumb"></bread-crumb>
    <el-table :data="tableData" border stripe>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column label="页面名称" prop="pagename"></el-table-column>
      <el-table-column label="页面所属项目" prop="projectname"></el-table-column>
      <el-table-column label="页面状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.pagestatus" type="success">已上线</el-tag>
          <el-tag v-else type="info">已下线</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.pagestatus" type="warning" icon="el-icon-setting" @click="setAutoTask(scope.row.id, 'offline')">设置自动下线任务</el-button>
          <el-button v-else type="success" icon="el-icon-setting" @click="setAutoTask(scope.row.id, 'online')">设置自动上线任务</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="'设置' + autoTaskIdentify + '计划任务'"
      :visible.sync="setTaskVisible"
      width="50%"
    >
      <el-date-picker
        v-model="autoTastDate"
        type="datetime"
        placeholder="选择日期时间"
        default-time="12:00:00">
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setTaskVisible = false">取 消</el-button>
        <el-button type="primary" @click="setTask()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import breadCrumb from '../../components/common/Breadcrumb'
export default {
  name: 'autotasklist',
  components: {
    breadCrumb
  },
  data () {
    return {
      crumb: ['页面管理', '自动任务列表'],
      tableData: [],
      // 自动任务标识符
      autoTaskIdentify: '',
      setTaskVisible: false,
      autoTastDate: ''
    }
  },
  created () {
    this.getAutoTaskList()
  },
  methods: {
    async getAutoTaskList () {
      const { data: res } = await this.$axios.get('autotasklist.json')
      if (res.meta.status !== 200) {
        return this.$message.error('获取自动任务列表失败')
      }
      this.tableData = res.data
    },
    setAutoTask (id, autoTaskIdentify) {
      if (autoTaskIdentify === 'online') {
        this.autoTaskIdentify = '上线'
      } else {
        this.autoTaskIdentify = '下线'
      }
      this.setTaskVisible = true
    },
    setTask () {
      if (this.autoTastDate === '') {
        return this.$message.error('请选择日期')
      }
      console.log(this.autoTastDate)
      this.setTaskVisible = false
    }
  }
}
</script>
